/**
维修底部表单
*/
<template>
	<div>
		<div class="text">产品寄出信息</div>
		<base-form ref="ref_out" :model.sync="model" :form-items="formItems" :is-form="false"/>

		<div class="text">产品寄回信息</div>
		<base-form :model.sync="model"  :form-items="formItems2" :is-form="false"/>

		<div class="text">网点信息</div>
		<base-form :model.sync="model" :form-items="formItems3" :is-form="false"/>
	</div>
	
</template>

<script>
import BaseForm from '../BaseForm/BaseForm.vue';

const ASM_RETURN_WAY = [
    {key: 'ON_DOOR',value: '顺丰上门取件'},
    {key: 'MAIL_IN',value: '用户自行寄回'},
    {key: 'ARRIVE_PAID',value: '快递到付'},
  ]
const options  =  [{
        value: 'zhinan',
        label: '江苏省',
        children: [
            {
                value: 'shejiyuanze',
                label: '苏州市',
                children: [
                    {
                        value: 'yizhi',
                        label: '园区'
                    }, {
                        value: 'fankui',
                        label: '高新区'
                    }, {
                        value: 'xiaolv',
                        label: '吴中区'
                    }, {
                        value: 'kekong',
                        label: '姑苏区'
                    }
                ]
            }, 
            {
                value: 'daohang',
                label: '南通市',
                children: [
                    {
                        value: 'cexiangdaohang',
                        label: '海安'
                    }, {
                        value: 'dingbudaohang',
                        label: '通州区'
                    }
                ]
            }
        ]
    }]
export default {
	name: 'WorkOrderRepair',
	components: {
		BaseForm
	},
	props: {
		value: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			formItems: [
				{
					label: '寄件方式',
					prop: 'asmOrderReturn.returnWay',
					type: 'select',
					component: 'el-select',
					select: ASM_RETURN_WAY,
					clearable: true,
					required: true,
					style: {
						width: '100%'
					},
					span: 12
				},
				{
					label: '取件备注',
					prop: 'asmOrderReturn.asmPickUpNote',
					type: 'text',
					component: 'el-input',
					required: true,
					span: 12
				},
				{
					label: '预约上门时间',
					prop: 'asmOrderReturn.onDoorDate',
					type: 'datetime',
					component: 'el-date-picker',
					required: true,
					span: 24,
					style: {
						width: '100%'
					}
				},
				{
					label: '用户姓名',
					prop: 'asmOrderReturn.customerName',
					type: 'text',
					component: 'el-input',
					span: 12
				},
				{
					label: '联系手机',
					prop: 'asmOrderReturn.customerPhone',
					type: 'text',
					reg: /^1([3456789]\d{0,9})?$/,
					len: 11,
					component: 'reg-input',
					required: true,
					span: 12
				},
				{
					label: '客户地址',
					prop: 'asmOrderReturn.cascaderCitys',
					type: 'cascader',
					component: 'el-cascader',
					options: options,
					required: true,
					ref: 'ref_work_cascader',
					style: { width: '100%' },
					events:{
						'change': (val) => {
							this.getValuePath(options,val,'-')
						}
					}
				},
				{
					label: '详细地址',
					prop: 'asmOrderReturn.addDetail',
					type: 'text',
					component: 'el-input',
					required: true,
					span: 12
				},
			],
			formItems2: [
				{
					label: '用户姓名',
					prop: 'asmOrderSales.customerName',
					type: 'text',
					component: 'el-input',
					span: 12
				},
				{
					label: '联系手机',
					prop: 'asmOrderSales.customerPhone',
					type: 'text',
					reg: /^1([3456789]\d{0,9})?$/,
					len: 11,
					component: 'reg-input',
					required: true,
					span: 12
				},
				{
					label: '客户地址',
					prop: 'asmOrderSales.cascaderCitys',
					type: 'cascader',
					component: 'el-cascader',
					options: options,
					required: true,
					style: { width: '100%' }
				},
				{
					label: '详细地址',
					prop: 'asmOrderSales.addDetail',
					type: 'text',
					component: 'el-input',
					required: true,
					span: 12
				},
			],
			formItems3: [
				{
					label: '网点',
					prop: 'servicerName',
					type: 'select',
					component: 'el-select',
					select: ASM_RETURN_WAY,
					required: true,
					disabled: true,
					span: 24,
					style: {
						width: '100%'
					}
				}
			],
		}
	},
	computed: {
		model: {
			get() {
				return this.value;
			},
			set(val) {
				// 触发父组件的 update:value 事件，并传递参数 val
				this.$emit('update:value', val);
			}
		}
	},
	created() {
	},
	mounted() {
	
	},
	methods: {
		
		getCascaderLabel(path,tree, arr = []) {
			// 如果树为空、路径为空或路径尚未处理完但无子节点，返回null
			if (!Array.isArray(tree) || path.length === 0) {
				return null;
			}

			const currentKey = path[0];
			const currentNode = tree.find(node => node.value === currentKey);

			if (!currentNode) {
				return null;
			}

			// 到达路径末尾，返回当前节点的label
			if (path.length === 1) {
				return currentNode.label;
			}

			// 继续处理子节点和剩余路径
			const val = this.getCascaderLabel(path.slice(1),currentNode.children || [], arr);

		} ,
		getValuePath(tree, path, separator = '-') {
			// 参数合法性校验
			if (!Array.isArray(tree) || path.length === 0) return null;

			let currentLevel = tree;
			let result = '';

			for (let i = 0; i < path.length; i++) {
				const key = path[i];
				const node = currentLevel.find(n => n.value === key);

				// 找不到节点直接返回 null
				if (!node) return null;

				// 拼接 value
				result += (i === 0 ? '' : separator) + node.label;

				// 准备进入下一层（即使路径未结束但无子节点，后续循环会自然失败）
				currentLevel = node.children || [];
			}
			return result;
		}
	}
}
</script>

<style scope>
.text{
    color: #AEAEAE;
 }
</style>
